<template>
  <div class="spaceinfo-container">
    <el-descriptions class="margin-top" title="个人信息" :column="1" border>
      <template slot="extra">
        <el-button type="primary" size="small" plain>操作</el-button>
      </template>
      <el-descriptions-item>
        <!-- 头像 -->
        <template slot="label">
          <i class="el-icon-picture-outline"></i>
          头像
        </template>
        <el-avatar shape="square" :size="50" :src="newUserInfo.avatar"></el-avatar>
      </el-descriptions-item>
      <!-- 用户名 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        {{ newUserInfo.username }}
      </el-descriptions-item>
      <!-- id -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-info"></i>
          ID
        </template>
        {{ newUserInfo._id }}
      </el-descriptions-item>
      <!-- 密码 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-warning"></i>
          密码
        </template>
        {{ newUserInfo.password }}
      </el-descriptions-item>
      <!-- 权限 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-custom"></i>
          权限
        </template>
        <el-tag size="small">{{ newUserInfo.role }}</el-tag>
      </el-descriptions-item>
      <!-- 邮箱 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-promotion"></i>
          邮箱
        </template>
        {{ newUserInfo.email }}
      </el-descriptions-item>
      <!-- 个人介绍 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-order"></i>
          个人介绍
        </template>
        {{ newUserInfo.introduce }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 扩展信息 -->
    <el-divider></el-divider>
    <el-descriptions class="margin-top" title="扩展信息" :column="1" border>
      <template slot="extra">
        <el-button type="primary" size="small" plain>操作</el-button>
      </template>
      <!-- QQ -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          QQ
        </template>
        15984846513
      </el-descriptions-item>
      <!-- id -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-info"></i>
          新浪微博
        </template>
        1561653545
      </el-descriptions-item>
      <!-- Google+ -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-warning"></i>
          Google+
        </template>
        Google+
      </el-descriptions-item>
      <!-- Github -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-promotion"></i>
          Github
        </template>
        Github
      </el-descriptions-item>
      <!-- Gitee -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-promotion"></i>
          Gitee
        </template>
        Gitee
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  name: 'SpaceInfo',
  props: ['newUserInfo'],
  data () {
    return {}
  }
}
</script>

<style></style>
